<template>
  <div class="container">
    <div class="top" :class="order_scene!=1&&'bg'">
      <img v-if="ossUrl" :src="ossUrl+'/mp_3.2.4/paysuccess@2x.png'" alt />
      <div class="toptext">{{order_scene==1?'支付成功':'订单确认成功'}}</div>
      <div class="gobtn" @click="seeOrder">查看订单</div>
      <div class="telbox" v-if="order_scene!=1">
        <div class="tel">用户手机号：{{sale_phone}}</div>
        <div class="btn" @click="copy">复制</div>
        <div class="btn" @click="call">拨打电话</div>
      </div>
    </div>
    <div class="explain" v-if="order_scene!=1">
      <div>平台挂售说明</div>
      <div>1.挂售平台交易通过线下转账进行;</div>
      <div>2.转账成功后若卖家长时间不进行确认,</div>
      <div>可以保存好相关转账记录，联系客服进行处理</div>
    </div>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
export default {
  data() {
    return {
      ossUrl: common.image_resource, //oss图片
      order_scene: "", //订单场景 1：平台 2：跳蚤市场
      sale_phone: "" //售卖者用户手机号
    };
  },
  onLoad(options) {
    // 获取传递参数
    this.order_scene = options.order_scene || "";
    if (options.sale_phone) {
      this.sale_phone = this.formatMobile(options.sale_phone);
    }
    // 设置导航栏标题
    let title = this.order_scene == 1 ? "订单支付" : "订单确认";
    wx.setNavigationBarTitle({
      title: title
    });
  },
  methods: {
    // 查看订单
    seeOrder() {
      if (this.order_scene == 1) {
        //平台
        wx.navigateTo({
          url: `/pages/ct_store/card_ticket_order/main?order_scene=${
            this.order_scene
          }`
        });
      } else if (this.order_scene == 2) {
        //跳蚤市场
        wx.navigateTo({
          url: `/pages/ct_store/market_order_list/main`
        });
      }
    },
    /**
     * 手机号格式化
     * @param {string | number} mobile 手机号
     * @returns '188 8888 8888'格式的手机号
     */
    formatMobile(mobile) {
      const regMobile = /^1\d{10}/;
      if (!regMobile.test(mobile)) {
        return "";
      }
      return String(mobile).replace(/(^\d{3}|\d{4}\B)/g, "$1 ");
    },
    //   复制
    copy() {
      let sale_phone = this.sale_phone.replace(/\s/g, "").toString();
      if (!sale_phone) {
        wx.showToast({
          title: "暂无可复制的文案",
          icon: "none",
          duration: 2000,
          mask: true
        });
        return false;
      }
      wx.setClipboardData({
        data: sale_phone,
        success(res) {
          console.log(res);
          wx.getClipboardData({
            success(res) {
              console.log(res.data); // data
            }
          });
        }
      });
    },
    // 拨打电话
    call() {
      let sale_phone = this.sale_phone.replace(/\s/g, "").toString();
      if (!sale_phone) {
        wx.showToast({
          title: "暂无有效手机号",
          icon: "none",
          duration: 2000,
          mask: true
        });
        return false;
      }
      wx.makePhoneCall({
        phoneNumber: sale_phone
      });
    }
  }
};
</script>

<style lang="less" scoped>
.Bg {
  background: rgba(255, 255, 255, 1);
  border-radius: 5px;
  padding: 12px 10px;
  margin: 0 10px 10px;
  box-sizing: border-box;
}
.container {
  width: 100%;
  height: 100%;
  background: rgba(243, 244, 246, 1);
  box-sizing: border-box;
  .top {
    margin-bottom: 10px;
    text-align: center;
    box-sizing: border-box;
    img {
      width: 70px;
      height: 70px;
      margin: 40px auto 14px;
    }
    .toptext {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      line-height: 20px;
    }
    .gobtn {
      width: 106px;
      height: 38px;
      line-height: 38px;
      background: linear-gradient(
        226deg,
        rgba(254, 120, 161, 1) 0%,
        rgba(254, 123, 136, 1) 100%
      );
      border-radius: 19px;
      text-align: center;
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      margin: 54px auto 46px;
    }
    .telbox {
      padding: 18px 16px;
      overflow: hidden;
      box-sizing: border-box;
      .tel {
        float: left;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
      }
      .btn {
        float: right;
        background: rgba(234, 234, 234, 1);
        border-radius: 4px;
        text-align: center;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        padding: 2px 9px;
        margin-left: 16px;
        box-sizing: border-box;
      }
    }
  }
  .bg {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 1) 100%
    );
    border-radius: 1px 1px 20px 20px;
  }
  .explain {
    .Bg;
    background-color: transparent;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    line-height: 13px;
    div {
      margin-bottom: 10px;
    }
  }
}
</style>